<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { showToast, showConfirmDialog } from 'vant'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores'
import request from '@/utils/request'
import { useLanxinCamera } from '@/composables/useLanxinCamera'

// 使用蓝信拍照 composable（两个用途：需求资料、操作相关）
const demandPhotos = ref([])
const transferPhotos = ref([])
const { chooseImage: chooseDemandImage, isLanxinAvailable } = useLanxinCamera(demandPhotos)
const { chooseImage: chooseTransferImage } = useLanxinCamera(transferPhotos)

// 处理蓝信选择的调拨图片
async function handleLanxinTransferImages(tempFilePaths) {
  try {
    for (const tempFilePath of tempFilePaths) {
      // 检查是否超过最大数量
      if (transferFileList.value.length >= maxTransferImages) {
        showToast(`最多只能上传${maxTransferImages}张操作相关图片`)
        break
      }
      
      // 将蓝信的临时文件路径转换为File对象
      const file = await convertLanxinTempFileToFile(tempFilePath)
      if (file) {
        // 创建预览URL
        const reader = new FileReader()
        reader.onload = (e) => {
          const newImage = {
            url: e.target.result,
            file: { uid: Date.now() + Math.random() },
            fileName: file.name,
            filePath: '', // 提交时会上传到服务器
            originalFile: file // 保存原始文件对象，用于后续上传
          }
          transferFileList.value.push(newImage)
          showToast(`操作相关图片 ${file.name} 选择成功`)
        }
        reader.readAsDataURL(file)
      }
    }
  } catch (error) {
    console.error('处理蓝信调拨图片失败:', error)
    showToast('处理图片失败')
  }
}

// 获取图片服务器地址配置
const getImageServerUrl = () => {
  // 优先使用localStorage中的配置
  try {
    const savedConfig = localStorage.getItem('APP_CONFIG')
    if (savedConfig) {
      const config = JSON.parse(savedConfig)
      if (config.IMAGE_SERVER_URL) {
        return config.IMAGE_SERVER_URL
      }
    }
  } catch (e) {
    console.warn('解析保存的配置失败:', e)
  }
  
  // 其次使用全局配置
  if (window.APP_CONFIG && window.APP_CONFIG.IMAGE_SERVER_URL) {
    return window.APP_CONFIG.IMAGE_SERVER_URL
  }
  
  // 默认配置
  return 'http://localhost:8070/profile'
}

// 获取用户信息
async function fetchUserInfo() {
  try {
    const response = await request.get('/api/user/userinfo')
    if (response.code === 0) {
      userInfo.value = response
      userRole.value = response.roles || ''
      console.log('用户信息获取成功:', response)
      console.log('用户角色:', response.roles)
      
      // 如果是新建模式，更新表单中的下达人和部门信息
      if (mode.value === 'create' && response.data) {
        const userData = response.data
        formData.value.applicant = userData.userName || userData.nickname || userData.loginName || '未知用户'
        formData.value.department = userData.deptName || userData.department || '未知部门'
        console.log('新建模式下已更新用户信息:', {
          applicant: formData.value.applicant,
          department: formData.value.department
        })
      }
    } else {
      console.error('获取用户信息失败:', response)
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 判断是否为仓库管理员
const isWarehouseManager = computed(() => {
  console.log('仓库管理员判断:', userRole.value, typeof userRole.value)
  // 支持多种可能的角色名称
  return userRole.value === '仓库管理员' || 
         userRole.value === 'warehouse_manager' ||
         userRole.value?.includes('仓库') ||
         userRole.value?.includes('warehouse')
})

// 判断是否为审批人（下达工单的人）
const isApprover = computed(() => {
  console.log('审批人判断:', userRole.value, typeof userRole.value)
  // 支持多种可能的角色名称
  return userRole.value === '审批人' || 
         userRole.value === 'approver' ||
         userRole.value?.includes('审批') ||
         userRole.value?.includes('approver')
})

// 判断是否显示审批人下达工单按钮（已审批状态）
const showApproverIssueButton = computed(() => {
  return isApprover.value && formData.value.status === 'approved'
})

// 判断是否显示审批人撤回按钮（已下达状态）
const showApproverWithdrawButton = computed(() => {
  return isApprover.value && formData.value.status === 'submitted'
})

// 判断是否显示审批人重新编辑按钮（被退回状态）
const showApproverReEditButton = computed(() => {
  return isApprover.value && formData.value.status === 'rejected'
})

// 判断是否显示仓库管理员操作按钮（工单已下发状态）
const showWarehouseManagerButtons = computed(() => {
  // 临时放宽条件，让仓库管理员在更多状态下都能看到按钮
  const result = isWarehouseManager.value && (
    formData.value.status === 'work_order_issued' ||
    formData.value.status === 'submitted' ||
    formData.value.status === 'approved'
  )
  console.log('=== 仓库管理员按钮显示条件检查 ===')
  console.log('isWarehouseManager.value:', isWarehouseManager.value)
  console.log('userRole.value:', userRole.value)
  console.log('formData.value.status:', formData.value.status)
  console.log('showWarehouseManagerButtons:', result)
  console.log('================================')
  return result
})

// 构建完整图片URL的辅助函数
function buildImageUrl(filePath) {
  if (!filePath) return ''
  
  // 如果已经是完整URL，直接返回
  if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
    return filePath
  }
  
  // 拼接服务器地址和文件路径
  return `${getImageServerUrl()}${filePath}`
}

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const { t } = useI18n()

// 页面模式：'create' | 'edit' | 'view'
const mode = ref('create')
const pageTitle = computed(() => {
  switch (mode.value) {
    case 'create': return '下达工单'
    case 'edit': return '修改工单'
    case 'view': return '工单详情'
    default: return '详情'
  }
})

// 动态设置页面标题
watch(pageTitle, (newTitle) => {
  if (typeof document !== 'undefined') {
    document.title = newTitle
  }
}, { immediate: true })

// 表单数据
const formData = ref({
  id: '',
  title: '',
  description: '',
  images: [],
  applicant: '', // 下达人
  department: '',
  submitTime: '', // 下达时间
  status: 'draft', // draft, submitted, approved, work_order_issued, print_completed, transfer_completed, completed, rejected
  applicationNo: '',
  createTime: '',
  updateTime: '',
  // 退回原因
  rejectReason: '',
  // 退回时间
  rejectTime: '',
  // 退回人
  rejectorName: ''
})

// 图片上传相关
const fileList = ref([])
const maxImages = 5

// 仓库管理员操作相关图片上传
const transferFileList = ref([])
const maxTransferImages = 5

// 图片预览相关
const showImagePreview = ref(false)
const currentImageIndex = ref(0)
const previewImages = ref([])

// 用户信息相关
const userInfo = ref(null)
const userRole = ref('')

// 根据路由参数初始化页面模式和数据
onMounted(() => {
  // 确保页面滚动到顶部
  window.scrollTo(0, 0)
  
  // 蓝信环境由 composable 内部自行初始化（可用则优先使用）
  
  // 获取用户信息
  fetchUserInfo()
  
  const id = route.query.id
  const modeParam = route.query.mode || 'create'
  
  mode.value = modeParam
  
  if (id && id !== 'new') {
    loadApplicationData(id)
  } else {
    // 新建模式，初始化空数据
    formData.value = {
      id: '',
      title: '',
      description: '',
      images: [],
      applicant: '', // 将在用户信息获取后设置
      department: '', // 将在用户信息获取后设置
      submitTime: '',
      status: 'draft',
      applicationNo: '',
      createTime: '',
      updateTime: '',
      rejectReason: '',
      rejectTime: '',
      rejectorName: ''
    }
  }
})

// 监听路由变化，确保每次进入页面都滚动到顶部
watch(() => route.path, () => {
  // 使用 nextTick 确保 DOM 更新后再滚动
  nextTick(() => {
    window.scrollTo(0, 0)
  })
}, { immediate: true })

// 加载申请数据
async function loadApplicationData(id) {
  try {
    // 显示加载状态
    showToast({
      message: '加载中...',
      duration: 1000
    })
    
    // 调用API获取申请详情
    const response = await request.get(`/api/inbound/detail/${id}`)
    
    if (response.code === 0 && response.application) {
      const data = response.application
      
              // 根据后端返回的数据结构进行适配
        formData.value = {
          id: data.applicationId || data.id,
          title: data.applicationName || '未命名工单',
          description: data.description || '无描述',
          images: data.attachments || [],
          applicant: data.approverName || '未知下达人',
          department: data.deptName || '未知部门',
          submitTime: data.submitTime || data.createTime || '',
          status: mapStatusFromChinese(data.status),
          applicationNo: data.applicationNo,
          createTime: data.createTime,
          updateTime: data.updateTime,
          rejectReason: data.rejectReason || '',
          rejectTime: data.rejectTime || '',
          rejectorName: data.rejectorName || ''
        }
      
      // 转换图片数据格式，兼容van-uploader（区分工单资料与操作相关）
      if (data.attachments && data.attachments.length > 0) {
        const demandAttachments = data.attachments.filter(att => att.attachmentType === '工单资料' || att.attachmentType === '需求资料')
        const operationAttachments = data.attachments.filter(att => att.attachmentType !== '工单资料' && att.attachmentType !== '需求资料')
        
        fileList.value = demandAttachments.map((attachment, index) => {
          const fullImageUrl = buildImageUrl(attachment.filePath) || attachment.url || ''
          return {
            url: fullImageUrl,
            file: { uid: attachment.attachmentId || index },
            fileName: attachment.fileName || `image_${index}.jpg`,
            filePath: attachment.filePath || attachment.url,
            isImage: true,
            status: 'done',
            attachmentId: attachment.attachmentId,
            attachmentType: attachment.attachmentType,
            uploadTime: attachment.uploadTime,
            uploadUserName: attachment.uploadUserName
          }
        })

        transferFileList.value = operationAttachments.map((attachment, index) => {
          const fullImageUrl = buildImageUrl(attachment.filePath) || attachment.url || ''
          return {
            url: fullImageUrl,
            file: { uid: attachment.attachmentId || (10000 + index) },
            fileName: attachment.fileName || `operation_${index}.jpg`,
            filePath: attachment.filePath || attachment.url,
            isImage: true,
            status: 'done',
            attachmentId: attachment.attachmentId,
            attachmentType: attachment.attachmentType,
            uploadTime: attachment.uploadTime,
            uploadUserName: attachment.uploadUserName
          }
        })
      } else {
        fileList.value = []
        transferFileList.value = []
      }
      
      // 根据状态决定页面模式
      // 只有草稿状态（未下达）可以编辑，其他状态都是只读
      if (formData.value.status === 'draft') {
        mode.value = 'edit'
      } else {
        mode.value = 'view'
      }
      
      console.log('工单详情加载成功:', formData.value)
    } else {
      showToast(response.msg || '获取工单详情失败')
      console.error('获取工单详情失败:', response)
    }
  } catch (error) {
    console.error('获取工单详情失败:', error)
    
    // 如果是认证错误，提示用户重新登录
    if (error.response && error.response.status === 401) {
      showToast('登录已过期，请重新登录')
      return
    }
    
    // 如果是网络错误或其他错误
    if (error.message) {
      showToast(`获取详情失败: ${error.message}`)
    } else {
      showToast('获取详情失败，请重试')
    }
  }
}

// 将中文状态映射为英文状态码
function mapStatusFromChinese(chineseStatus) {
  const statusMap = {
    '草稿': 'draft',
    '未下达': 'draft',
    '已下达': 'submitted',
    '已审批': 'approved',
    '工单已下发': 'work_order_issued',
    '打印完成': 'print_completed',
    '调拨完成': 'transfer_completed',
    '已完成': 'completed',
    '已驳回': 'rejected'
  }
  return statusMap[chineseStatus] || 'draft'
}

// 是否可编辑
const isEditable = computed(() => {
  return mode.value === 'create' || mode.value === 'edit'
})

// 是否显示下达相关信息
const showSubmitInfo = computed(() => {
  return mode.value === 'view' && formData.value.status !== 'draft'
})

// 是否为开发环境
const isDevelopment = computed(() => {
  return false;

  // 检查是否为开发环境
  return import.meta.env?.MODE === 'development' || 
         window.location.hostname === 'localhost' || 
         window.location.hostname === '127.0.0.1'
})

// 图片上传处理
function onUploadImage(file) {
  console.log('上传图片:', file)
  
  // 检查文件大小（限制为5MB）
  if (file.file.size > 5 * 1024 * 1024) {
    showToast('图片大小不能超过5MB')
    return false
  }
  
  // 检查文件类型
  if (!file.file.type.startsWith('image/')) {
    showToast('请选择图片文件')
    return false
  }
  
  // 检查是否超过最大数量
  if (fileList.value.length >= maxImages) {
    showToast(`最多只能上传${maxImages}张图片`)
    return false
  }
  
  // 添加到文件列表
  const newImage = {
    url: file.content,
    file: { uid: Date.now() },
    fileName: file.file.name,
    filePath: '', // 提交时会上传到服务器
    originalFile: file.file, // 保存原始文件对象，用于后续上传
    isImage: true,
    status: 'done'
  }
  
  fileList.value.push(newImage)
  showToast('图片选择成功')
  return true
}

// 触发文件选择
async function triggerFileSelect() {
  if (fileList.value.length >= maxImages) {
    showToast(`最多只能上传${maxImages}张图片`)
    return
  }
  
  const remainingCount = maxImages - fileList.value.length
  if (isLanxinAvailable()) {
    chooseDemandImage({
      maxCount: remainingCount,
      sourceType: ['camera', 'album'],
      quality: 'low',
      onSuccess: (newPhotos) => {
        newPhotos.forEach((p) => {
          if (fileList.value.length >= maxImages) return
          fileList.value.push({
            url: p.url,
            file: { uid: Date.now() + Math.random() },
            fileName: p.file.name,
            filePath: '',
            originalFile: p.file,
            isImage: true,
            status: 'done'
          })
        })
        showToast('图片选择成功')
      }
    })
    return
  }
  // 降级到原生文件选择
  const fileInput = document.querySelector('input[type="file"]')
  if (fileInput) fileInput.click()
}

// 文件选择处理
function onFileSelected(event) {
  const files = event.target.files
  if (!files || files.length === 0) return
  
  // 检查是否超过最大数量
  if (fileList.value.length + files.length > maxImages) {
    showToast(`最多只能上传${maxImages}张图片`)
    return
  }
  
  // 处理每个选中的文件
  Array.from(files).forEach(file => {
    // 检查文件大小（限制为5MB）
    if (file.size > 5 * 1024 * 1024) {
      showToast(`图片 ${file.name} 大小不能超过5MB`)
      return
    }
    
    // 检查文件类型
    if (!file.type.startsWith('image/')) {
      showToast(`文件 ${file.name} 不是图片格式`)
      return
    }
    
    // 创建预览URL
    const reader = new FileReader()
    reader.onload = (e) => {
      const newImage = {
        url: e.target.result,
        file: { uid: Date.now() + Math.random() },
        fileName: file.name,
        filePath: '', // 提交时会上传到服务器
        originalFile: file // 保存原始文件对象，用于后续上传
      }
      fileList.value.push(newImage)
      showToast(`图片 ${file.name} 选择成功`)
    }
    reader.readAsDataURL(file)
  })
  
  // 清空文件输入，允许重复选择同一文件
  event.target.value = ''
}

// 删除图片
function onDeleteImage(file, detail) {
  console.log('删除图片:', file, detail)
  
  // 从fileList中删除对应的图片
  const index = fileList.value.findIndex(item => 
    item.file.uid === file.file.uid || 
    item.url === file.url ||
    item.fileName === file.fileName
  )
  
  if (index > -1) {
    fileList.value.splice(index, 1)
    showToast('图片删除成功')
  }
  
  return true
}

// 仓库管理员操作相关图片上传处理
function onUploadTransferImage(file) {
  console.log('上传操作相关图片:', file)
  
  // 检查文件大小（限制为5MB）
  if (file.file.size > 5 * 1024 * 1024) {
    showToast('操作相关图片大小不能超过5MB')
    return false
  }
  
  // 检查文件类型
  if (!file.file.type.startsWith('image/')) {
    showToast('请选择图片格式的文件')
    return false
  }
  
  // 检查是否超过最大数量
  if (transferFileList.value.length >= maxTransferImages) {
    showToast(`最多只能上传${maxTransferImages}张操作相关图片`)
    return false
  }
  
  // 添加到文件列表
  const newImage = {
    url: file.content,
    file: { uid: Date.now() },
    fileName: file.file.name,
    filePath: '',
    originalFile: file.file,
    isImage: true,
    status: 'done'
  }
  
  transferFileList.value.push(newImage)
  showToast('操作相关图片选择成功')
  return true
}

// 触发操作相关文件选择
async function triggerTransferFileSelect() {
  if (transferFileList.value.length >= maxTransferImages) {
    showToast(`最多只能上传${maxTransferImages}张操作相关图片`)
    return
  }
  
  const remainingCount = maxTransferImages - transferFileList.value.length
  if (isLanxinAvailable()) {
    chooseTransferImage({
      maxCount: remainingCount,
      sourceType: ['camera', 'album'],
      quality: 'low',
      onSuccess: (newPhotos) => {
        newPhotos.forEach((p) => {
          if (transferFileList.value.length >= maxTransferImages) return
          transferFileList.value.push({
            url: p.url,
            file: { uid: Date.now() + Math.random() },
            fileName: p.file.name,
            filePath: '',
            originalFile: p.file
          })
        })
        showToast('操作相关图片选择成功')
      }
    })
    return
  }
  // 降级到原生文件选择
  const transferFileInput = document.querySelector('input[name="transfer-files"]')
  if (transferFileInput) transferFileInput.click()
}

// 操作相关文件选择处理
function onTransferFileSelected(event) {
  const files = event.target.files
  if (!files || files.length === 0) return
  
  // 检查是否超过最大数量
  if (transferFileList.value.length + files.length > maxTransferImages) {
    showToast(`最多只能上传${maxTransferImages}张操作相关图片`)
    return
  }
  
  // 处理每个选中的文件
  Array.from(files).forEach(file => {
    // 检查文件大小（限制为5MB）
    if (file.size > 5 * 1024 * 1024) {
      showToast(`操作相关图片 ${file.name} 大小不能超过5MB`)
      return
    }
    
    // 检查文件类型
    if (!file.type.startsWith('image/')) {
      showToast(`文件 ${file.name} 不是图片格式`)
      return
    }
    
    // 创建预览URL
    const reader = new FileReader()
    reader.onload = (e) => {
      const newImage = {
        url: e.target.result,
        file: { uid: Date.now() + Math.random() },
        fileName: file.name,
        filePath: '',
        originalFile: file
        }
      transferFileList.value.push(newImage)
      showToast(`操作相关图片 ${file.name} 选择成功`)
    }
    reader.readAsDataURL(file)
  })
  
  // 清空文件输入，允许重复选择同一文件
  event.target.value = ''
}

// 删除操作相关图片
function onDeleteTransferImage(file) {
  console.log('删除操作相关图片:', file)
  
  // 从transferFileList中删除对应的图片
  const index = transferFileList.value.findIndex(item => 
    item.file.uid === file.file.uid || 
    item.url === file.url ||
    item.fileName === file.fileName
  )
  
  if (index > -1) {
    transferFileList.value.splice(index, 1)
    showToast('操作相关图片删除成功')
  }
  
  return true
}

// 保存草稿
async function saveDraft() {
  if (!formData.value.title.trim()) {
    showToast('请输入工单名称')
    return
  }
  
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    formData.value.status = 'draft'
    showToast('保存成功')
    
    // 如果是新建，跳转到编辑模式
    if (mode.value === 'create') {
      const newId = Date.now().toString()
      formData.value.id = newId
      router.replace({
        path: '/inbound/detail',
        query: { id: newId, mode: 'edit' }
      })
      mode.value = 'edit'
    }
  } catch (error) {
    showToast('保存失败，请重试')
  }
}

// 上传图片到服务器
async function uploadImages() {
  try {
    // 创建FormData，只包含文件
    const uploadFormData = new FormData()
    
    // 只上传新选择的文件，跳过已上传的文件
    const newFiles = fileList.value.filter(item => item.originalFile)
    
    if (newFiles.length === 0) {
      console.log('没有新选择的文件需要上传')
      return true
    }
    
    // 添加新选择的文件，参数名使用 'files'
    newFiles.forEach((item, index) => {
      uploadFormData.append('files', item.originalFile)
    })
    
    console.log('开始上传工单图片，新文件数量:', newFiles.length)
    
    // 调用后端接口，一次上传多张图片
    const response = await request.post('/api/inbound/upload/files', uploadFormData)
        
    if (response.code === 0) {
      console.log('工单图片上传成功:', response)
      
      // 根据后端返回的文件路径更新本地数据
      if (response.filePaths && Array.isArray(response.filePaths)) {
        // 如果后端返回了文件路径数组，按顺序更新
        newFiles.forEach((item, index) => {
          if (response.filePaths[index]) {
            item.filePath = response.filePaths[index]
            console.log(`图片 ${item.fileName} 路径更新为: ${item.filePath}`)
          }
        })
      } else if (response.filePath) {
        // 如果后端只返回了一个路径，为所有文件设置相同的基础路径
        newFiles.forEach((item, index) => {
          item.filePath = response.filePath
          console.log(`图片 ${item.fileName} 路径设置为: ${item.filePath}`)
        })
      } else {
        // 如果后端没有返回路径，生成默认路径
        newFiles.forEach((item, index) => {
          item.filePath = `/upload/${Date.now()}_${index}_${item.fileName}`
          console.warn(`图片 ${item.fileName} 使用默认路径: ${item.filePath}`)
        })
      }
      
      return true
    } else {
      throw new Error(response.msg || '上传失败')
    }
  } catch (error) {
    console.error('工单图片上传失败:', error)
        
    // 如果是认证错误，直接返回false，让用户重新登录
    if (error.response && error.response.status === 401) {
      showToast('登录已过期，请重新登录')
      return false
    }
        
    // 如果是网络错误
    if (error.code === 'NETWORK_ERROR' || error.message.includes('Network Error')) {
      showToast('图片上传失败: 网络错误，请检查网络连接')
      return false
    }
        
    showToast(`图片上传失败: ${error.message || '未知错误'}`)
    return false
  }
}

// 上传操作相关图片到服务器
async function uploadTransferImages() {
  try {
    // 创建FormData，只包含文件
    const uploadFormData = new FormData()
    
    // 只上传新选择的文件，跳过已上传的文件
    const newFiles = transferFileList.value.filter(item => item.originalFile)
    
    if (newFiles.length === 0) {
      console.log('没有新选择的操作相关文件需要上传')
      return true
    }
    
    // 添加新选择的文件，参数名使用 'files'
    newFiles.forEach((item, index) => {
      uploadFormData.append('files', item.originalFile)
    })
    
    console.log('开始上传操作相关图片，新文件数量:', newFiles.length)
    
    // 调用后端接口，一次上传多张图片
    const response = await request.post('/api/inbound/upload/files', uploadFormData)
        
    if (response.code === 0) {
      console.log('操作相关图片上传成功:', response)
      
      // 根据后端返回的文件路径更新本地数据
      if (response.filePaths && Array.isArray(response.filePaths)) {
        // 如果后端返回了文件路径数组，按顺序更新
        newFiles.forEach((item, index) => {
          if (response.filePaths[index]) {
            item.filePath = response.filePaths[index]
            console.log(`操作相关图片 ${item.fileName} 路径更新为: ${item.filePath}`)
          }
        })
      } else if (response.filePath) {
        // 如果后端只返回了一个路径，为所有文件设置相同的基础路径
        newFiles.forEach((item, index) => {
          item.filePath = response.filePath
          console.log(`操作相关图片 ${item.fileName} 路径设置为: ${item.filePath}`)
        })
      } else {
        // 如果后端没有返回路径，生成默认路径
        newFiles.forEach((item, index) => {
          item.filePath = `/upload/${Date.now()}_${index}_${item.fileName}`
          console.warn(`操作相关图片 ${item.fileName} 使用默认路径: ${item.filePath}`)
        })
      }
      
      return true
    } else {
      throw new Error(response.msg || '上传失败')
    }
  } catch (error) {
    console.error('操作相关图片上传失败:', error)
        
    // 如果是认证错误，直接返回false，让用户重新登录
    if (error.response && error.response.status === 401) {
      showToast('登录已过期，请重新登录')
      return false
    }
        
    // 如果是网络错误
    if (error.code === 'NETWORK_ERROR' || error.message.includes('Network Error')) {
      showToast('操作相关图片上传失败: 网络错误，请检查网络连接')
      return false
    }
        
    showToast(`操作相关图片上传失败: ${error.message || '未知错误'}`)
    return false
    }
}

// 下达工单
async function submitApplication() {
  if (!formData.value.title.trim()) {
    showToast('请输入工单名称')
    return
  }
  
  try {
    await showConfirmDialog({
      title: '确认下达',
      message: '下达后将不能修改，确定要下达吗？'
    })
    
    // 先上传图片
    const uploadSuccess = await uploadImages()
    if (!uploadSuccess) {
      return
    }
    
    // 准备提交数据
    const submitData = {
      applicationName: formData.value.title,
      description: formData.value.description || '',
      attachments: fileList.value.map(item => {
        // 确保filePath存在
        if (!item.filePath) {
          console.warn('图片缺少filePath:', item)
          // 如果没有filePath，生成一个默认的
          item.filePath = `/upload/${Date.now()}_${item.fileName}`
        }
        
        return {
          attachmentType: '工单资料',
          fileName: item.fileName,
          filePath: item.filePath
        }
      })
    }
    
    console.log('提交数据:', submitData)
    
    // 调用提交接口
    const response = await request.post('/api/inbound/submit', submitData)
    
    if (response.code === 0) {
      formData.value.status = 'submitted'
      formData.value.submitTime = new Date().toLocaleString('zh-CN')
      formData.value.id = response.applicationId
      formData.value.applicant = response.loginName
      mode.value = 'view'
      
      showToast('下达成功')
    } else {
      showToast(response.msg || '下达失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('提交失败:', error)
      
      // 如果是认证错误，提示用户重新登录
      if (error.response && error.response.status === 401) {
        showToast('登录已过期，请重新登录')
        return
      }
      
      // 如果是网络错误或其他错误
      if (error.message) {
        showToast(`下达失败: ${error.message}`)
      } else {
        showToast('下达失败，请重试')
      }
    }
  }
}

// 删除申请
async function deleteApplication() {
  try {
    await showConfirmDialog({
      title: '确认删除',
      message: '删除后数据将无法恢复，确定要删除吗？'
    })
    
    console.log('开始删除工单，工单ID:', formData.value.id)
    
    // 调用后端删除接口
    const response = await request.delete(`/api/inbound/delete/${formData.value.id}`)
    
    if (response.code === 0) {
      showToast('删除成功')
      // 跳转回列表页
      router.back()
    } else {
      showToast(response.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除工单失败:', error)
      
      // 如果是认证错误，提示用户重新登录
      if (error.response && error.response.status === 401) {
        showToast('登录已过期，请重新登录')
        return
      }
      
      // 如果是网络错误或其他错误
      if (error.message) {
        showToast(`删除失败: ${error.message}`)
      } else {
        showToast('删除失败，请重试')
      }
    }
  }
}

// 撤回工单
async function withdrawApplication() {
  try {
    await showConfirmDialog({
      title: '确认撤回',
      message: '撤回后可以重新编辑工单，确定要撤回吗？'
    })
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    formData.value.status = 'draft'
    formData.value.submitTime = ''
    mode.value = 'edit'
    
    showToast('撤回成功')
  } catch (error) {
    if (error !== 'cancel') {
      showToast('撤回失败，请重试')
    }
  }
}

// 审批人操作 - 下达工单
async function handleIssueWorkOrder() {
  try {
    await showConfirmDialog({
      title: '确认下达工单',
      message: `确定要向仓库管理员下达"${formData.value.title}"的工单吗？`
    })
    
    // 调用下达工单接口
    const response = await request.post(`/api/inbound/process/${formData.value.id}`)
    
    if (response.code === 0) {
      showToast('工单下达成功')
      // 跳转回列表页
      router.back()
    } else {
      showToast(response.msg || '工单下达失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('工单下达失败:', error)
      showToast('操作失败，请稍后重试')
    }
  }
}

// 仓库管理员操作 - 完成打印
async function handleCompletePrint() {
  try {
    await showConfirmDialog({
      title: '确认完成打印',
      message: `确认"${formData.value.title}"的打印操作已完成吗？`
    })
    
    // 创建FormData，包含申请ID和可选的图片文件
    const uploadFormData = new FormData()
    
    // 添加打印相关的图片文件（如果有的话）
    if (transferFileList.value.length > 0) {
      transferFileList.value.forEach((item, index) => {
        if (item.originalFile) {
          uploadFormData.append('files', item.originalFile)
        }
      })
    }
    
    // 调用完成打印接口，传递FormData
    const response = await request.post(`/api/inbound/complete/print/${formData.value.id}`, uploadFormData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    
    if (response.code === 0) {
      showToast('打印完成确认成功')
      // 跳转回列表页
      router.back()
    } else {
      showToast(response.msg || '打印完成确认失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('打印完成确认失败:', error)
      showToast('操作失败，请稍后重试')
    }
  }
}

// 仓库管理员操作 - 完成调拨
async function handleCompleteTransfer() {
  if (transferFileList.value.length === 0) {
    showToast('请先上传操作相关图片')
    return
  }
  
  try {
    await showConfirmDialog({
      title: '确认完成调拨',
      message: `确认"${formData.value.title}"的调拨操作已完成吗？`
    })
    
    // 创建FormData，包含文件和申请ID
    const uploadFormData = new FormData()
    
    // 添加操作相关图片文件
    transferFileList.value.forEach((item, index) => {
      if (item.originalFile) {
        uploadFormData.append('files', item.originalFile)
      }
    })
    
    // 调用完成调拨接口，直接传递文件
    const response = await request.post(`/api/inbound/complete/transfer/${formData.value.id}`, uploadFormData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    
    if (response.code === 0) {
      showToast('调拨完成确认成功')
      // 跳转回列表页
      router.back()
    } else {
      showToast(response.msg || '调拨完成确认失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('调拨完成确认失败:', error)
      showToast('操作失败，请稍后重试')
    }
  }
}

// 审批人重新编辑被退回的工单
function handleReEdit() {
  // 切换到编辑模式
  mode.value = 'edit'
  showToast('已切换到编辑模式，请修改工单内容')
}

// 获取状态显示文本
function getStatusDisplayText(status) {
  const statusTextMap = {
    'draft': '草稿',
    'submitted': '已下达',
    'approved': '已审批',
    'work_order_issued': '工单已下发',
    'print_completed': '打印完成',
    'transfer_completed': '调拨完成',
    'completed': '已完成',
    'rejected': '已驳回'
  }
  return statusTextMap[status] || status
}

// 预览图片
function previewImage(index) {
  if (fileList.value.length === 0) return
  
  currentImageIndex.value = index
  previewImages.value = fileList.value.map(item => item.url)
  showImagePreview.value = true
}

// 关闭图片预览
function closeImagePreview() {
  showImagePreview.value = false
  currentImageIndex.value = 0
}

// 预览“操作相关图片”
function previewTransferImage(index) {
  if (transferFileList.value.length === 0) return
  currentImageIndex.value = index
  previewImages.value = transferFileList.value.map(item => item.url)
  showImagePreview.value = true
}
// 格式化时间
function formatTime(timeStr) {
  if (!timeStr) return ''
  
  try {
    const date = new Date(timeStr)
    const now = new Date()
    const diff = now - date
    
    // 如果是今天，显示时间
    if (diff < 24 * 60 * 60 * 1000) {
      return date.toLocaleTimeString('zh-CN', { 
        hour: '2-digit', 
        minute: '2-digit' 
      })
    }
    
    // 如果是昨天，显示"昨天"
    if (diff < 48 * 60 * 60 * 1000) {
      return '昨天'
    }
    
    // 其他显示日期
    return date.toLocaleDateString('zh-CN', { 
      month: '2-digit', 
      day: '2-digit' 
    })
  } catch (error) {
    return timeStr
  }
}
</script>

<template>
  <div class="detail-page">
    <!-- 主要内容 -->
    <div class="content-wrapper">
      <div class="form-container">
        
        <!-- 工单名称 -->
        <div class="form-item">
          <div class="form-label">
            工单名称
            <span v-if="isEditable" class="required">*</span>
            :
          </div>
          <van-field
            v-if="isEditable"
            v-model="formData.title"
            placeholder="请输入"
            :border="false"
            class="form-input"
          />
          <div v-else class="form-value">{{ formData.title || '未填写' }}</div>
        </div>

        <!-- 工单资料图片上传 -->
        <div class="form-item">
          <div class="form-label">
            工单资料(最多{{ maxImages }}张):
          </div>
          
          <div class="upload-section">
            <template v-if="isEditable">
              <!-- 图片预览区域 -->
              <div class="image-preview-area">
                <div 
                  v-for="(item, index) in fileList" 
                  :key="item.file.uid"
                  class="image-preview-item"
                  @click="previewImage(index)"
                >
                  <img :src="item.url" alt="预览图片" class="preview-image" />
                  <div class="delete-btn" @click.stop="onDeleteImage(item)">
                    <van-icon name="cross" />
                  </div>
                </div>
                
                <!-- 上传按钮 -->
                <div 
                  v-if="fileList.length < maxImages"
                  class="upload-btn"
                  @click="triggerFileSelect"
                >
                  <van-icon name="plus" size="24" />
                  <span class="upload-text">选择图片</span>
                </div>
              </div>
              
              <!-- 隐藏的文件输入 -->
              <input
                ref="fileInput"
                type="file"
                accept="image/*"
                multiple
                style="display: none"
                @change="onFileSelected"
              />
            </template>
            <template v-else>
              <div v-if="fileList.length > 0" class="image-list">
                <div 
                  v-for="(item, index) in fileList" 
                  :key="item.file.uid"
                  class="image-item"
                  @click="previewImage(index)"
                >
                  <img :src="item.url" alt="工单资料" />
                </div>
              </div>
              <div v-else class="no-images">暂无图片</div>
            </template>
          </div>
        </div>

        <!-- 描述 -->
        <div class="form-item">
          <div class="form-label">描述:</div>
          <van-field
            v-if="isEditable"
            v-model="formData.description"
            type="textarea"
            placeholder="请输入描述内容"
            rows="4"
            autosize
            :border="false"
            class="form-textarea"
          />
          <div v-else class="form-value">{{ formData.description || '无描述' }}</div>
        </div>

        <!-- 调试信息（开发环境显示） -->
        <template v-if="isDevelopment">
          <div class="debug-info">
            <div class="debug-title">调试信息</div>
            <div class="debug-item">
              <span class="debug-label">用户角色:</span>
              <span class="debug-value">{{ userRole }}</span>
            </div>
            <div class="debug-item">
              <span class="debug-label">工单状态:</span>
              <span class="debug-value">{{ formData.status }}</span>
            </div>
            <div class="debug-item">
              <span class="debug-label">是否仓库管理员:</span>
              <span class="debug-value">{{ isWarehouseManager }}</span>
            </div>
            <div class="debug-item">
              <span class="debug-label">是否审批人:</span>
              <span class="debug-value">{{ isApprover }}</span>
            </div>
            <div class="debug-item">
              <span class="debug-label">显示仓库管理员按钮:</span>
              <span class="debug-value">{{ showWarehouseManagerButtons }}</span>
            </div>
            <!-- 蓝信相关调试信息移至 composable 内部处理 -->
          </div>
        </template>

        <!-- 仓库管理员操作图片上传（仅仓库管理员在工单已下发状态时显示） -->
        <template v-if="showWarehouseManagerButtons">
          <div class="form-item">
            <div class="form-label">
              操作相关图片(最多{{ maxTransferImages }}张):
              <span class="optional-tip">（可选，用于记录打印或调拨过程）</span>
            </div>
            
            <div class="upload-section">
              <!-- 操作相关图片预览区域 -->
              <div class="image-preview-area">
                <div 
                  v-for="(item, index) in transferFileList" 
                  :key="item.file.uid"
                  class="image-preview-item"
                  @click="previewImage(index)"
                >
                  <img :src="item.url" alt="操作相关图片预览" class="preview-image" />
                  <div class="delete-btn" @click.stop="onDeleteTransferImage(item)">
                    <van-icon name="cross" />
                  </div>
                </div>
                
                <!-- 上传按钮 -->
                <div 
                  v-if="transferFileList.length < maxTransferImages"
                  class="upload-btn"
                  @click="triggerTransferFileSelect"
                >
                  <van-icon name="plus" size="24" />
                  <span class="upload-text">选择图片</span>
                </div>
              </div>
              
              <!-- 隐藏的文件输入 -->
              <input
                name="transfer-files"
                type="file"
                accept="image/*"
                multiple
                style="display: none"
                @change="onTransferFileSelected"
              />
            </div>
          </div>
        </template>

        <!-- 已上传的操作相关图片（查看模式显示） -->
        <template v-if="!isEditable && transferFileList.length > 0">
          <div class="form-item">
            <div class="form-label">操作相关图片:</div>
            <div class="image-list">
              <div 
                v-for="(item, index) in transferFileList" 
                :key="item.file.uid"
                class="image-item"
                @click="previewTransferImage(index)"
              >
                <img :src="item.url" alt="操作相关图片" />
              </div>
            </div>
          </div>
        </template>

        <!-- 下达信息（仅查看模式显示） -->
        <template v-if="showSubmitInfo">
          <div class="form-item">
            <div class="form-label">下达人:</div>
            <div class="form-value">{{ formData.applicant }}</div>
          </div>
          
          <div class="form-item">
            <div class="form-label">下达时间:</div>
            <div class="form-value">{{ formData.submitTime }}</div>
          </div>
        </template>

        <!-- 退回信息（已驳回状态显示，编辑模式下不显示） -->
        <template v-if="formData.status === 'rejected' && formData.rejectReason && mode !== 'edit'">
          <div class="approval-info-section">
            <h3 class="approval-title">退回信息</h3>
            
            <div class="form-item">
              <div class="form-label">退回原因:</div>
              <div class="form-value reject-reason">{{ formData.rejectReason }}</div>
            </div>
          </div>
        </template>

        <!-- 底部操作按钮 -->
        <div class="action-buttons">
          <!-- 新建/编辑模式按钮 -->
          <template v-if="isEditable">
            <van-button
              v-if="mode === 'edit'"
              type="danger"
              size="large"
              round
              @click="deleteApplication"
              class="action-btn action-delete-btn"
            >
              删除
            </van-button>
            
            <van-button
              type="default"
              size="large"
              round
              @click="saveDraft"
              class="action-btn save-btn"
            >
              保存
            </van-button>
            
            <van-button
              type="primary"
              size="large"
              round
              @click="submitApplication"
              class="action-btn submit-btn"
            >
              下达
            </van-button>
          </template>
          
          <!-- 查看模式按钮 -->
          <template v-else-if="mode === 'view'">
            <!-- 审批人在已审批状态下的下达工单按钮 -->
            <template v-if="showApproverIssueButton">
              <van-button
                type="success"
                size="large"
                round
                @click="handleIssueWorkOrder"
                class="action-btn issue-work-order-btn"
              >
                下达工单
              </van-button>
            </template>
            
            <!-- 审批人在已下达状态下的撤回按钮 -->
            <template v-else-if="showApproverWithdrawButton">
              <van-button
                type="warning"
                size="large"
                round
                @click="withdrawApplication"
                class="action-btn withdraw-btn"
              >
                撤回工单
              </van-button>
            </template>
            
            <!-- 审批人在被退回状态下的重新编辑按钮 -->
            <template v-else-if="showApproverReEditButton">
              <van-button
                type="primary"
                size="large"
                round
                @click="handleReEdit"
                class="action-btn re-edit-btn"
              >
                重新编辑
              </van-button>
            </template>
            
            <!-- 仓库管理员操作按钮 -->
            <template v-else-if="showWarehouseManagerButtons">
              <van-button
                type="primary"
                size="large"
                round
                @click="handleCompletePrint"
                class="action-btn complete-print-btn"
              >
                完成打印
              </van-button>
              
              <van-button
                type="success"
                size="large"
                round
                @click="handleCompleteTransfer"
                class="action-btn complete-transfer-btn"
              >
                完成调拨
              </van-button>
            </template>
            
            <!-- 临时调试按钮 - 仓库管理员角色测试 -->
            <!-- <template v-else-if="isWarehouseManager">
              <van-button
                type="warning"
                size="large"
                round
                @click="() => showToast('仓库管理员角色已识别')"
                class="action-btn debug-btn"
              >
                调试：仓库管理员
              </van-button>
            </template> -->
          </template>
        </div>
      </div>
    </div>
    
    <!-- 图片预览组件 -->
    <van-image-preview
      v-model:show="showImagePreview"
      :images="previewImages"
      :start-position="currentImageIndex"
      @close="closeImagePreview"
      :show-index="true"
      :show-indicators="true"
      :closeable="true"
      :close-icon-position="['top-right']"
    />
  </div>
</template>

<style scoped>
.detail-page {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 80px; /* 为底部导航留出空间 */
}

.content-wrapper {
  padding: 0;
}

.form-container {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.form-item {
  margin-bottom: 24px;
}

.form-label {
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.4;
}

.required {
  color: #ee0a24;
}

.optional-tip {
  color: #7c8db5;
  font-size: 14px;
  font-weight: normal;
  margin-left: 8px;
}

.form-input {
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  overflow: hidden;
  transition: border-color 0.2s ease;
  padding: 0;
}

.form-input:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.form-input :deep(.van-field__control) {
  font-size: 16px;
  color: #2c3e50;
  background: transparent;
  padding: 12px 16px;
}

.form-input :deep(.van-field__body) {
  background: transparent;
}

.form-textarea {
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  overflow: hidden;
  transition: border-color 0.2s ease;
  padding: 0;
}

.form-textarea:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.form-textarea :deep(.van-field__control) {
  font-size: 16px;
  color: #2c3e50;
  line-height: 1.5;
  background: transparent;
  padding: 12px 16px;
  min-height: 100px;
}

.form-textarea :deep(.van-field__body) {
  background: transparent;
}

.form-value {
  color: #5a6c7d;
  font-size: 16px;
  line-height: 1.5;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.upload-section {
  width: 100%;
}

/* 图片预览区域样式 */
.image-preview-area {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
}

.image-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e9ecef;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: #ee0a24;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 2px solid white;
  z-index: 10;
}

.upload-btn {
  width: 80px;
  height: 80px;
  border: 2px dashed #d0d7de;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  color: #7c8db5;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-btn:hover {
  border-color: #667eea;
  color: #667eea;
  background: #f0f2ff;
}

.upload-text {
  font-size: 12px;
  margin-top: 4px;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
}

.image-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e9ecef;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.image-item:hover {
  transform: scale(1.05);
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}

.no-images {
  color: #7c8db5;
  font-size: 14px;
  text-align: center;
  padding: 40px 0;
}

.action-buttons {
  padding: 20px;
  margin-top: 16px;
  border-radius: 12px;
  display: flex;
  gap: 12px;
}

.action-btn {
  flex: 1;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
}

.action-delete-btn {
  background: #ee0a24;
  border: none;
}

.save-btn {
  background: #f8f9fa;
  color: #2c3e50;
  border: 1px solid #e9ecef;
}

.submit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.withdraw-btn {
  background: #ff976a;
  border: none;
}

.issue-work-order-btn {
  background: #07c160;
  border: none;
}

.re-edit-btn {
  background: #1989fa;
  border: none;
}

.complete-print-btn {
  background: #1989fa;
  border: none;
}

.complete-transfer-btn {
  background: #07c160;
  border: none;
}

.debug-btn {
  background: #ff976a;
  border: none;
}

/* 调试信息样式 */
.debug-info {
  background: #f0f8ff;
  border: 1px solid #b0d4f1;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
  font-family: 'Courier New', monospace;
}

.debug-title {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
  font-size: 14px;
}

.debug-item {
  margin-bottom: 6px;
  font-size: 12px;
}

.debug-label {
  color: #7f8c8d;
  margin-right: 8px;
  font-weight: 500;
}

.debug-value {
  color: #e74c3c;
  word-break: break-all;
  background: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #ddd;
}

/* 审批信息区域样式 */
.approval-info-section {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
}

.approval-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 2px solid #667eea;
}

.reject-reason {
  background: #ffebee;
  border: 1px solid #ffcdd2;
  color: #c62828;
  font-weight: 500;
  padding: 12px;
  border-radius: 6px;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .content-wrapper {
    padding: 2px;
  }
  
  .form-container {
    padding: 16px;
  }
  
  .action-buttons {
    /* 贴底、允许按钮自然换行为两列网格，不使用横向滚动 */
    position: sticky;
    bottom: 0;
    background: #ffffff;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  
  .action-btn {
    /* 两列等分排布，移动端不横向滚动 */
    flex: 1 1 calc(50% - 4px);
    min-width: auto;
    height: 44px;
    font-size: 15px;
  }
  
  /* 表单行允许自然换行，避免信息被省略 */
  .form-label,
  .form-value,
  .form-input :deep(.van-field__control) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .detail-page {
    background-color: #1a1a1a;
  }
  
  .form-container {
    background: #2c2c2c;
    border-color: #404040;
  }
  
  .form-label {
    color: #e0e0e0;
  }
  
  .form-value {
    background: #404040;
    border-color: #606060;
    color: #c0c0c0;
  }
  
  .action-buttons {
    background: #2c2c2c;
    border-color: #404040;
  }
  
  .save-btn {
    background: #404040;
    color: #e0e0e0;
    border-color: #606060;
  }
}
</style>

<route lang="json5">
{
  name: 'InboundDetail',
  meta: {
    title: '工单详情'
  }
}
</route>
